<template>
	<view class="container">
		<view class="header">
			<view class="calendar">
				<image style="width:44rpx;display: block;"  mode="widthFix"
					src="../../static/calendar.png"></image>
				<text v-if="calendar.time" class="calendarDay">{{calendar.time.day}}</text>
			</view>
			<view class="header-title">
				<text @click="current = 0" class="text" :class="{active:0==current}">发现</text>
				<text @click="current = 1" class="text" :class="{active:1==current}">频道</text>
				<text @click="current = 2" class="text" :class="{active:2==current}">我的</text>
			</view>
			<icon type="search" size="16" @click="searchHandler" />
		</view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#e3e3e3"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<Discover></Discover>
			</view>
			<view v-show="current === 1">
				<Channel></Channel>
			</view>
			<view v-show="current === 2">
				<My></My>
			</view>
		</view>
	</view>
</template>

<script>
	import Discover from "@/components/Discover/Discover.vue"
	import Channel from "@/components/Channel/Channel.vue"
	import My from "@/components/My/My.vue"
	export default {
		components:{
			Discover,
			Channel,
			My,
		},
		data() {
			return {
				current: 0,
				items: ["发现", "频道", "我的"],
				calendar: {},
			}
		},
		methods: {
			onClickItem(e) {
				this.current = e.currentIndex;
			},
			searchHandler(){
				uni.showLoading({
					title:'加载中'
				});
				uni.request({
					url:`https://apis.netstart.cn/vmovier/search`,
					success: (res) => {
						this.$store.commit('getSearchwords', {
							searchwords: res.data.data,
						});
						uni.navigateTo({
							url: `../../pages/search/search`,
							complete: () => {
								uni.hideLoading();
							}
						})
					}
					
				})
			}
		},
		created() {
			uni.request({
				url: 'https://apis.netstart.cn/vmovier/index/getDayCover',
				success: (res) => {
					this.calendar = res.data.data;
				}
			})
		}
	}
</script>

<style lang="less">
	.container {
		.header {
			background-color: #000000;
			display: flex;
			line-height: 88rpx;
			align-items: center;
			justify-content: space-between;
			padding: 0 3vw;
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			z-index: 2;
			box-sizing: border-box;

			.calendar {
				position: relative;

				// .img {
				// 	width: 44rpx;
				// }

				.calendarDay {
					position: absolute;
					top: 12rpx;
					left: 8rpx;
					color: #9e9e9e;
					font-size: 24rpx;
					transform: scale(0.8);
					display: block;
					line-height: 24rpx;
				}
			}

			.header-title {
				color: #747474;
				width: 50vw;
				display: flex;
				justify-content: space-between;

				.text {
					width: 90rpx;
					text-align: center;
				}

				.active {
					color: white;
					border-bottom: 5rpx solid #ebebeb;
					box-sizing: border-box;
				}
			}
		}
	}

	/deep/ .segmented-control {
		// background-color: #000000;
		display: none;
	}
	.content{
		margin-top: 88rpx;
	}
</style>
